

Vue.createApp({
    // 定义组件
    components:{
        "dynamic-user-info": DYNAMIC_USER_INFO
    },
    // 初始化
    setup(){
        // reactive定义变量运行存储
        // toRefs将数据返回
        const {
            reactive, toRefs
        } = Vue
        // 定义变量，即所需数据
        const state = reactive({
            follows: {},
            option: "关注了用户",
            user: {}
        })
        let href = location.href.split("/")
        let userId = href[href.length - 1]
        let that = state
        get("/getFollowUser/" + userId, function(data){
            // 给follow是添加一个是否关注的表示符
            data.forEach(element => {
                element.follow.isFollow = false
            });
            that.follows = data
        });
        get("/loginUser", function(data){
            that.user = data
        });
        // 返回数据
        return {
            ...toRefs(state)
        }
    },
    methods:{
        follow:function(index) {
            console.log(index);
            let user = this.users[index]
            let userId = user.userId
            if (this.user.userId == userId) {
                swalError("关注失败", "不能关注您自己")
                return
            }
            let that = this
            get("/follow/" + this.user.userId + "/" + userId, function (success) {
                if (1 == success) {
                    // 将isFollow置为true
                    that.users[index].isFollow = true
                    swalSuccess("关注成功", "该作者发表文章后会第一时间通知您")
                } else {
                    that.users.isFollow = false
                    swalError("取消关注", "该作者发表文章后您将无法收到通知")
                }
            })
        },
       followInfo:function(user){
        return user.name+'写了'+user.words+'字，被'+user.fans+'人关注，获得了'+user.likes+'个喜欢'
    }
    },
    computed:{
    //    followInfo:function(user){
    //         return user.name+'写了'+user.words+'字，被'+user.fans+'人关注，获得了'+user.likes+'个喜欢'
    //     }
    }
    // 绑定app
}).mount("#followUser")